<template>
  <div class="ContentMessage" v-if="friend">
    <div class="message-header">
      <div>
        <div>{{ friend.nickName }}</div>
        <div style="color: #969696; margin-top: 2px">抖音：{{ friend.accountName }}</div>
      </div>
      <div>
        <el-button size="small" round @click="closeMessage">关闭</el-button>
      </div>
    </div>
    <MessageList></MessageList>
    <MessageInput v-if="!onlyLook"></MessageInput>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, computed} from 'vue'
import MessageList from "./message-list"
import MessageInput from "./message-input/message-input"
import {useStore} from "vuex"
const store = useStore()
const props = defineProps({
  onlyLook:{
    type: Boolean,
    default: false
  },
  dialogType: {
    type: Boolean,
    default: false
  }
})
const friend = computed(() => store.state.conversation.active)
const emits = defineEmits(["closeDialog"])
const closeMessage = () => {
  if(props.dialogType) {
    emits("closeDialog")
  }else {
    store.dispatch("conversation/closeMessage")
  }
}
</script>

<style scoped lang="scss">
.ContentMessage {
  height: 100%;
  border: 1px solid $borderColor;
  //border-left: none;
  margin-left: -1px;
  display: flex;
  flex-direction: column;
}
.message-header {
  height: 50px;
  width: 100%;
  border-bottom: 1px solid $borderColor;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;

  padding: 5px 10px;
  span {
    font-size: 12px;
  }
}
</style>